<template>
    <div>
        <Tabbar v-model="active" class="tabBar" active-color="red">
            <TabbarItem icon="home-o" @click="toHome">首页</TabbarItem>
            <TabbarItem icon="point-gift-o" @click="toCategory">分类</TabbarItem>
            <TabbarItem icon="photo-o" @click="toWorthBuying">值得买</TabbarItem>
            <TabbarItem icon="cart-o" @click="toGoodsdetail">详情</TabbarItem>
            <TabbarItem icon="user-circle-o" @click="toPersonal">个人</TabbarItem>
        </Tabbar>
    </div>
</template>
<script lang="ts">
export default {
    name: 'tabBar'
}
</script>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { Tabbar, TabbarItem } from 'vant';
import { ref } from 'vue';
const active = ref(0);
const router = useRouter()

const toHome = () => {
    router.push('/home')
}
const toCategory = () => {
    router.push('/category')
}
const toWorthBuying = () => {
    router.push('/worthbuying')
}
const toGoodsdetail = () => {
    router.push('/cart')
}
const toPersonal = () => {
    router.push('/personal')
}
</script>

<style lang="less" scoped>
.tabBar {
    width: 375px;
    position: fixed;
    bottom: 0;
}
</style>